<template>
	<div>
		<div class="activitiesbanner" v-if="dataList.length>0">
			<!--一行一列-->
			<div v-if="posadpicStyle==='one'">
				<div v-for="(val,index) in dataList" :key="index">
					<img style="width: 100%;" :src="val.publicityPicture" @click='jumpEvent(val)' />
				</div>
			</div>
			<!--一行两列-->
			<div class="coutwoPic" v-if="posadpicStyle==='two'" >
				<div class="coutwoPicimg" v-for="(val,index) in dataList" :key="index">
					<img :src="val.publicityPicture" @click="jumpEvent(val)" />
				</div>
			</div>
			<!--一行三列-->
			<div class="couthreePic" v-if="posadpicStyle==='three'" >
				<div class="couThreePicimg" v-for="(val,index) in dataList" :key="index">
					<img :src="val.publicityPicture" @click='jumpEvent(val)' />
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div v-if="dataList.length==0 && env === 'edit'" style="height: 2.5rem;line-height: 2.5rem;">请配置图片数据</div>
	</div>
</template>

<script>
import {NAVIGATE} from "../../config/postMessage-types";
import {mapGetters} from "vuex";
import handlePath from "../../utils/lxn/handlePath"
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
			config: {
				type: Object,
				default: () => {}
			},
			part:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
			}
        },
        computed: {
			posadpicStyle() {
				if(this.config.id) {
					if(parseInt(this.getCurrentVDONew(this.config.id,this.part).config.posadpicStyle) == 0) {
						return 'one';
					} else if(parseInt(this.getCurrentVDONew(this.config.id, this.part).config.posadpicStyle) == 1) {
						return 'two';
					} else if(parseInt(this.getCurrentVDONew(this.config.id, this.part).config.posadpicStyle) == 2) {
						return 'three';
					} else {
						return 'one';
					}
				}
			},
			env() {
				return window.environment; // 获取是否是编辑状态
			},
            isApp() {
				return window.isApp;
			},
			...mapGetters('wxh', [
                'userInfo'
            ]),
            hasUserInfo() {
                return Object.keys(this.userInfo).length;
            },
		},
		components: {
		},
		methods: {
            jumpEvent(item) {
                if (!item.extendField) return;
                if (!this.isApp) {
						// var urldata = JSON.parse(item.extendField).url.path
						var urldata = handlePath(item)
                        if(urldata) {
                            this.$router.push({
								path : urldata
                                // name: "MiddleWare",
                                // params: {
                                //     pageName: urldata
                                // }
                            })
                        }
                    } else if (this.isApp){
						var urldata = JSON.parse(item.extendField).url
						if(!urldata){return}
                        if(urldata.valueArray[0] == '商品详情页面' ) {
                            this.gotornpage('Detail', urldata.path.split("=")[1])
                        } else if(urldata.valueArray[0] == '分类页面'){
                            this.gotornpage('GoodsClassify', urldata.path.split("=")[1])
                        }else if(urldata.valueArray[0] == '其他页面') {
                            if(urldata.path == 'IntegralBuy') {
                                if(this.hasUserInfo ===0) {
                                    this.gotornpage('Login')
                                }else{
                                    this.gotornpage(urldata.path)
                                }
                            }else if(urldata.path == 'Coupons'){
                                this.gotornpage('CouponsAcquire')
                            } else if (urldata.path == 'buyGiftCard') {
                                if(this.hasUserInfo ===0) {
                                    this.gotornpage('Login')
                                } else{
                                    this.gotornpage('BuyGiftCard')
                                }
                            } else if(urldata.path == 'foodChecked'){
                                if(this.hasUserInfo ===0) {
                                    this.gotornpage('Login')
                                }
                                else{
                                    this.gotornpage('FoodCheck')
                                }
                            } else if(urldata.path == 'prize_card'){
								if(this.hasUserInfo ===0) {
									this.gotornpage('Login')
								} else {
								this.$router.push({
									name: "MiddleWare",
									params: {
										pageName: urldata.path
									}
								})
							}
							} else if(urldata.path == 'integral'){
								if(this.hasUserInfo ===0) {
									this.gotornpage('Login')
								} else {
								this.$router.push({
									name: "MiddleWare",
									params: {
										pageName: urldata.path
									}
								})
							}
						} else if(urldata.path == 'login'){
                                this.gotornpage('Login')
                            } else if(urldata.path == 'register'){
                                this.gotornpage('Regrester')
                            } else {
                                this.$router.push({
                                    name: "MiddleWare",
                                    params: {
                                        pageName: urldata.path
                                    }
                                })
                            }
                        }
                    }
			    },
			gotornpage(page, code) {
                    let params = {}
                    if(page=='Detail'){
                        params = {
                            screen: page,
                            params:{
                                goodsCode: code
                            }
                        }
                    }else if(page=='GoodsClassify'){
                        params = {
                            screen: page,
                            params:{
                                classCode: code
                            }
                        }
                    } else {
                        params = {
                            screen: page,
                        }
                    }
                    let goBackIns = {
                        type: NAVIGATE,
                        params: params
                    }
                    window.postMessage(JSON.stringify(goBackIns));
			}
		},

		mounted() {

		},
	}
</script>

<style>
	.activitiesbanner .coutwoPic {
		/*padding: 0.5rem;*/
		position: relative;
		float: left;
		width: 100%;
	}
	
	.activitiesbanner .coutwoPic .coutwoPicimg {
		position: relative;
		float: left;
		width: 50%;
		/*margin: 0.3rem 0rem;*/
	}
	
	.activitiesbanner .coutwoPic .coutwoPicimg img {
		width: 100%;
		/*padding: 0 0.25rem;*/
	}
	
	.activitiesbanner .couthreePic {
		/*padding: 0.5rem 0.2rem;*/
		text-align: center;
		margin: 0rem auto;
		float: left;
	}
	
	.activitiesbanner .couthreePic .couThreePicimg {
		float: left;
		/*margin: 0.3rem 1%;*/
		width: 33.33%;
	}
	
	.activitiesbanner .couthreePic .couThreePicimg img {
		max-width: 100%;
		margin: 0 auto;
	}
</style>